<template>
  <view class="page flex-col">
    <view class="group_3 flex-col">
      <view class="box_3 flex-row justify-between">
        <view class="block_1 flex-row">
          <view class="image-text_9 flex-row justify-between"  @click="toggle('bottom')">
            <text class="text-group_1">全部仪器</text>
            <image
              class="thumbnail_10"
              referrerpolicy="no-referrer"
              src="./imgs/down.png"
            />
          </view>
        </view>
        <view class="block_2 flex-row">
          <view class="image-text_10 flex-row justify-between">
            <image
              class="thumbnail_6"
              referrerpolicy="no-referrer"
              src="./imgs/search.png"
            />
            <input class="text-group_2" type="text" placeholder="搜索实验仪器" v-model="keyword" @confirm="loadMoreData(true)"/>
          </view>
        </view>
      </view>
      <view class="grid_2 flex-row">
        <scroll-view scroll-y="true" @scrolltolower="loadMoreData" style="width: 100%;height: 100%;">
          <view class="grid">
            <view
                class="list-items_1 flex-col"
                v-for="(item, index) in loopData0"
                @click="gotoInstrumentDetail(item)"
                :key="index"
            >
              <view class="image-text_11 flex-col">
                <image
                    class="image_2"
                    referrerpolicy="no-referrer"
                    :src="item.thumb_url"
                />
                <text class="text-group_3">{{item.name}}</text>
              </view>
              <view class="text-wrapper_4 flex-row justify-between">
                <text
                    class="text_4"
                    :style="{ color: 'rgba(255,112,36,1)' }"
                >
                  #
                </text>
                <text class="text_5" >{{item.instrument_category_name}}</text>
              </view>
            </view>
            <text class="text_9" v-if="isFinish">没有更多了～</text>
          </view>
        </scroll-view>

      </view>
    </view>
  </view>
  <view>
    <!-- 普通弹窗 -->
    <uni-popup ref="popup" class="my-popup" type="bottom" background-color="#fff" borderRadius="12px 12px 0px 0px">
      <view class="popup-content">
        <view class="group_5 flex-col">
          <view class="box_9 flex-row justify-between">
            <text class="text_12">选择仪器类型</text>
            <image
                @click="closePop"
                class="thumbnail_7"
                referrerpolicy="no-referrer"
                src="./imgs/close.png"
            />
          </view>
          <view class="section_2 flex-row justify-between" v-for="(item,index) in options" :key="index" @click="change(item)">
            <text class="text_13" :class="{'active': selOpt == item.value}">{{ item.label }}</text>
            <image
                v-if="selOpt == item.value"
                class="thumbnail_13"
                referrerpolicy="no-referrer"
                src="./imgs/check.png"
            />
          </view>
          <view class="text-wrapper_9 flex-col" @click="confirmSel">
            <text class="text_17">确定</text>
          </view>
        </view>
      </view>
    </uni-popup>
    <tabBar :tabIndex="3"></tabBar>
  </view>
</template>
<script>
export default {
  data() {
    return {
      loopData0: [],
      constants: {},
      options: [{
        "value": null,
        "label": "全部仪器",
        "tag": "",
        "text": "全部仪器"
      }],
      keyword: '',
      selOpt: null,
      current: 1,
      pageSize: 10,
      isFinish: false,
    };
  },
  async onLoad() {
    // await this.getOptionsData()
    await this.getInstrumentOptions()
    await this.loadMoreData(true)
  },
  methods: {
    toggle(){
      console.log('this.$refs.popup',this.$refs.popup)
      this.$refs.popup.open()
    },
    closePop(){
      this.$refs.popup.close()
    },
    change(item){
      this.selOpt = item.value
    },
    confirmSel(){
      this.closePop()
      this.loadMoreData(true)
    },
    async getInstrumentOptions(reset = false){
      let res= await this.API.InstrumentCategoryOptions({keyWords: ''})
      console.log('rfe',res)
      this.options = this.options.concat(res)
    },
    async loadMoreData(reset = false){
      if(reset){
        this.current = 1
        this.loopData0 = []
      }

      let param = {
        current: this.current,
        pageSize: this.pageSize,
        instrument_category_idArray: this.selOpt!=null?[this.selOpt]:[],
        // for_student: true,
        keyword: this.keyword,
      }
      let res= await this.API.InstrumentPagedList({args: param})
      console.log('res',res)
      if(res){
        this.loopData0 = this.loopData0.concat(res.data)
        if(this.loopData0.length == res.total){
          this.isFinish = true
        } else {
          this.current++;
          this.isFinish = false;
        }
      }
    },
    gotoInstrumentDetail(item){
      uni.navigateTo({
        url: '/pages/wiki/detail?id='+ item.instrument_id
      });
    }
  },
};
</script>
<style scoped lang="less">
.my-popup{
  z-index: 999!important;
}
.popup-content {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  overflow: hidden;
  border-radius: 12px 12px 0px 0px;

  .group_5 {
    background-color: rgba(255, 255, 255, 1);
    padding: 44rpx 48rpx 18rpx 48rpx;
  }

  .box_9 {
    width: 654rpx;
  }

  .text_12 {
    overflow-wrap: break-word;
    color: rgba(38, 38, 38, 1);
    font-size: 36rpx;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 50rpx;
  }

  .thumbnail_7 {
    width: 40rpx;
    height: 40rpx;
    margin-bottom: 10rpx;
  }

  .section_2 {
    box-shadow: inset 0px 0px 0px 0px rgba(230, 235, 241, 1);
    background-color: rgba(255, 255, 255, 1);
    width: 654rpx;
    margin-top: 32rpx;
    padding: 36rpx 0 40rpx 0;
  }

  .text_13 {
    overflow-wrap: break-word;
    font-size: 32rpx;
    color: rgba(0, 0, 0, 1);
    font-family: PingFangSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 52rpx;
    &.active{
      color: rgba(39, 118, 255, 1);
    }
  }

  .thumbnail_13 {
    width: 40rpx;
    height: 40rpx;
    margin: 8rpx 0 4rpx 0;
  }

  .text-wrapper_6 {
    box-shadow: inset 0px 0px 0px 0px rgba(230, 235, 241, 1);
    background-color: rgba(255, 255, 255, 1);
    padding: 36rpx 462rpx 40rpx 0;
  }

  .text_14 {
    overflow-wrap: break-word;
    color: rgba(0, 0, 0, 1);
    font-size: 32rpx;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 52rpx;
  }

  .text-wrapper_7 {
    box-shadow: inset 0px 0px 0px 0px rgba(230, 235, 241, 1);
    background-color: rgba(255, 255, 255, 1);
    padding: 36rpx 430rpx 40rpx 0;
  }

  .text_15 {
    overflow-wrap: break-word;
    color: rgba(0, 0, 0, 1);
    font-size: 32rpx;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 52rpx;
  }

  .text-wrapper_8 {
    box-shadow: inset 0px 0px 0px 0px rgba(230, 235, 241, 1);
    background-color: rgba(255, 255, 255, 1);
    padding: 36rpx 462rpx 40rpx 0;
  }

  .text_16 {
    overflow-wrap: break-word;
    color: rgba(0, 0, 0, 1);
    font-size: 32rpx;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 52rpx;
  }

  .text-wrapper_9 {
    background-color: rgba(39, 118, 255, 1);
    border-radius: 6px;
    margin: 80rpx 8rpx 0 10rpx;
    padding: 22rpx 284rpx 22rpx 284rpx;
  }

  .text_17 {
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 34rpx;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    text-align: right;
    white-space: nowrap;
    line-height: 48rpx;
  }
}
.page {
  background-color: rgba(248, 248, 248, 1);
  position: relative;
  width: 750rpx;
  //height: 1418rpx;
  height: calc(100vh - 196rpx);
  .group_3 {
    padding-bottom: 6rpx;
    height: 100%;
    .box_3 {
      box-shadow: inset 0px 0px 0px 0px rgba(230, 235, 241, 1);
      background-color: rgba(255, 255, 255, 1);
      width: 750rpx;
      padding: 24rpx 30rpx 24rpx 32rpx;
      .block_1 {
        background-color: rgba(255, 255, 255, 1);
        border-radius: 19px;
        border: 1px solid rgba(230, 235, 241, 1);
        padding: 18rpx 30rpx 18rpx 30rpx;
        .image-text_9 {
          width: 152rpx;
          .text-group_1 {
            overflow-wrap: break-word;
            color: rgba(38, 38, 38, 1);
            font-size: 28rpx;
            font-weight: normal;
            text-align: left;
            white-space: nowrap;
            line-height: 40rpx;
          }
          .thumbnail_10 {
            width: 24rpx;
            height: 24rpx;
            margin: 8rpx 0 8rpx 0;
          }
        }
      }
      .block_2 {
        background-color: rgba(248, 249, 251, 1);
        border-radius: 19px;
        padding: 20rpx 208rpx 20rpx 24rpx;
        .image-text_10 {
          width: 216rpx;
          .thumbnail_6 {
            width: 40rpx;
            height: 40rpx;
          }
          .text-group_2 {
            overflow-wrap: break-word;
            color: rgba(191, 191, 191, 1);
            font-size: 28rpx;
            font-weight: normal;
            text-align: left;
            white-space: nowrap;
            line-height: 40rpx;
          }
        }
      }
    }
    .grid_2 {
      width: 696rpx;
      height: calc(100vh - 44px - 24rpx - 24rpx - 128rpx - 24rpx - 24rpx - 24rpx);
      flex-wrap: wrap;
      margin: 24rpx 26rpx 0 24rpx;
      padding-bottom: 34px;
      .grid{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .list-items_1 {
          background-color: rgba(255, 255, 255, 1);
          border-radius: 12px;
          width: 336rpx;
          height: 352rpx;
          padding-bottom: 20rpx;
          margin: 0 24rpx 24rpx 0;
          &:nth-child(2n) {
            margin-right: 0;
          }
          &:nth-last-child(-n + 2) {
            margin-bottom: 0;
          }
          .image-text_11 {
            .image_2 {
              width: 336rpx;
              height: 220rpx;
              background-color: rgba(216, 216, 216, 0.5);
              border-radius: 24rpx 24rpx 0px 0px;
            }
            .text-group_3 {
              overflow-wrap: break-word;
              color: rgba(38, 38, 38, 1);
              font-size: 28rpx;
              font-family: PingFangSC-Medium;
              font-weight: 500;
              text-align: left;
              white-space: nowrap;
              line-height: 40rpx;
              margin: 24rpx 88rpx 0 24rpx;
            }
          }
          .text-wrapper_4 {
            width: 72rpx;
            margin: 16rpx 240rpx 0 24rpx;
            .text_4 {
              overflow-wrap: break-word;
              font-size: 24rpx;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
              line-height: 32rpx;
              margin-right: 5rpx;
            }
            .text_5 {
              width: 96rpx;
              overflow-wrap: break-word;
              color: rgba(140, 140, 140, 1);
              font-size: 24rpx;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
              line-height: 32rpx;
            }
          }
        }
        .text_9 {
          overflow-wrap: break-word;
          color: rgba(191, 191, 191, 1);
          font-size: 24rpx;
          font-weight: normal;
          text-align: left;
          white-space: nowrap;
          line-height: 34rpx;
          margin: 32rpx 300rpx 0 306rpx;
        }
      }
    }
  }
}

</style>
